<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta name="renderer" content="webkit" />
    <meta name="force-rendering" content="webkit" />
    <title>签到</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nutui/nutui@2.2.13/dist/nutui.min.css">
    <link rel="stylesheet" type="text/css" href="css/common.css" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <link rel="stylesheet" type="text/css" href="css/popup.css" />
    <link rel="stylesheet" type="text/css" href="css/sign.css" />
    <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_2353733_t7cyb5u5n1.css" />
    <script src="js/config.js"></script>
    <script src="https://unpkg.zhimg.com/axios/dist/axios.min.js"></script>
    <script src="js/axios-config.js?v=4"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="js/component.js?v=10"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script src="js/rili.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@nutui/nutui@2.2.13/dist/nutui.min.js"></script>
</head>

<body>
    <div id="SignApp" class="sign-page">
        <div class="sign-in" id="signIn">
            <button id="sign-txt">立即签到</button>
            <p>您已签到</p>
            <div class="sign-day"><strong id="sign-count"></strong>天</div>
        </div>
        <div class="Calendar">
            <div class="sign-year flex flex-pack-center" id="toyear">
                <div class="calendar-pre" id="idCalendarPre"><i class="iconfont icon-arrowleftb3"></i></div>
                <div class="year-month flex-1">
                    <span id="idCalendarYear"></span>-<span id="idCalendarMonth"></span>
                </div>
                <div class="calendar-next" id="idCalendarNext"><i class="iconfont icon-arrowrightb3"></i></div>
            </div>
            <table class="calendar-table" border="1px" cellpadding="0" cellspacing="0">
                <thead>
                    <tr class="day-title">
                        <td>日</td>
                        <td>一</td>
                        <td>二</td>
                        <td>三</td>
                        <td>四</td>
                        <td>五</td>
                        <td>六</td>
                    </tr>
                </thead>
                <tbody id="idCalendar"></tbody>
            </table>
        </div>
        <div class="sign-rules">
            <span class="rule-button" @click="showDialog">签到规则<i class="iconfont icon-arrowdownb1"></i></span>
        </div>
        <!-- 通用toast弹窗 -->
        <div class="toast" v-show="toastShow">
            {{toastText}}
        </div>
    </div>
</body>

<script>
    var signApp = new Vue({
        el: "#SignApp",
        data: {
            show: false,
            isSign: false,
            count: 0,
            toastText: '',
            toastShow: false,
            myday: new Array(),
            year: new Date().getFullYear(),
            month: new Date().getMonth() + 1,
        },
        created() {
            this.getSignDays();
        },
        methods: {
            toast(message, time = 3000) {
                this.toastText = message;
                this.toastShow = true;
                setTimeout(() => {
                    this.toastShow = false;
                }, time);
            },

            getSignDays() {
                axios.post('/mp/wechatUser/getSignDays', {
                    year: this.year,
                    month: this.month
                }).then(res => {
                    this.myday = res.data;
                    this.rili();
                });
            },

            showDialog() {
                this.$dialog({
                    title: "小打卡，大乐趣，敬请期待！",
                    closeBtn: true,  //显式右上角关闭按钮
                    noFooter: true,
                });
            },

            rili() {
                var _this = this;
                var cale = new Calendar("idCalendar", {
                    qdDay: _this.myday,
                    onToday: function (o) {
                        o.className = "onToday";
                    },
                    onSignIn: function () {
                        $$("sign-txt").innerHTML = '已签到';
                    },
                    onFinish: function () {
                        // console.log('this.myday');
                        // console.log(_this.myday);
                        $$("sign-count").innerHTML = _this.myday.length //已签到次数
                        $$("idCalendarYear").innerHTML = this.Year;
                        $$("idCalendarMonth").innerHTML = this.Month; //表头年份

                    }
                });
                //to上个月
                $$("idCalendarPre").onclick = function () {
                    if (_this.count < 11) {
                        _this.count++;
                        cale.PreMonth();
                    } else {
                        _this.toast('只显示近一年的记录哦');
                    }

                }
                //to下个月
                $$("idCalendarNext").onclick = function () {
                    _this.count--;
                    cale.NextMonth();
                }
                //添加今天签到
                $$("signIn").onclick = function () {
                    if (_this.isSign == false) {
                        axios.post('/mp/wechatUser/sign').then(res => {
                            var state = res.data;
                            var resCale = cale.SignIn();
                            if (state.code == 1 && resCale == '1') {
                                $$("sign-txt").innerHTML = '已签到';
                                $$("sign-count").innerHTML = parseInt($$("sign-count").innerHTML) + 1;
                                _this.isSign = true;
                            } else {
                                $$("sign-txt").innerHTML = '已签到';
                                _this.toast('今天已经签到了哦！');
                            }
                        });

                    } else {
                        _this.toast('今天已经签到了哦！');
                    }

                }
            }
        },

    });

</script>

</html>